<template>
	<view class="personalCenter">
		<custom-navbar pageTitle="个人中心" :hasTitleBorder="false">
			<template v-slot:searchForm>
				<view class="userInfo">
					<view class="avatar">
						<image class="icon" src="@/static/personalCenter/avatar.png" mode=""></image>
					</view>
					<view class="info">
						<view class="nickName">
							{{ userInfo?.nickName }}
						</view>
						<view class="dept">
							{{ userInfo?.dept?.deptName }}
						</view>
					</view>
				</view>

			</template>
		</custom-navbar>

		<view class="main">
			<view class="cards">
				<view class="card-item">
					<view class="label">
						性别
					</view>
					<view class="value">
						{{ userInfo?.sex ? '女' : '男' }}
					</view>
				</view>
				<view class="card-item">
					<view class="label">
						手机号
					</view>
					<view class="value">
						{{ userInfo?.phonenumber }}
					</view>
				</view>
				<view class="card-item">
					<view class="label">
						到期时间
					</view>
					<view class="value">
						{{ expireTimeComputed }}
					</view>
				</view>
			</view>
			<view class="item" v-for="(item, index) in mainData" :key="index" @click="handlerClick(item)">
				<view class=""
					style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
					<view class="icon">
						<i class="iconfont" :class="item.icon"></i>
					</view>
					<view class="label">
						{{ item.label }}
					</view>
				</view>
				<view class="linkTo">
					<i class="iconfont icon-youjiantou"></i>
				</view>
			</view>
		</view>
		<custom-tabbar> </custom-tabbar>
	</view>
</template>

<script setup lang="ts">
	import { computed, onMounted } from "vue"
	import { storeToRefs } from "pinia"
	import { onShow } from "@dcloudio/uni-app"
	//组件
	import customTabbar from "@/components/customTabbar/index.vue"
	import customNavbar from "@/components/customNavbar/index.vue"
	//hooks
	import useViewModel from "@/appHooks/useViewModel"
	let { getUserInfo } = useViewModel()
	//store
	import { useUserInfoStore } from "@/store/useUserInfoStore.ts";
	const userStore = useUserInfoStore();
	let { userInfo } = storeToRefs(userStore)

	//到期时间
	let expireTimeComputed = computed(() => {
		let { expireTime = '' } = userInfo.value
		return expireTime.split(' ')[0]
	})
	//main
	let mainData = [
		{
			label: '关于我们',
			icon: 'icon-guanyuwomen',
			path: '/pages/about/index',
			type: 'navigate'
		},
		{
			label: '退出登录',
			icon: 'icon-tuichudenglu',
			path: '/pages/about/index',
			type: 'logout'
		}
	]

	const handlerClick = (item) => {
		let { path, type } = item
		if (type == 'navigate') {
			uni.navigateTo({
				url: path
			})
		} else {
			uni.showModal({
				title: '提示',
				content: '是否确认退出登录?',
				success(res) {
					if (res.confirm) {
						userStore.setToken("")
						userStore.setPermissions([])
						userStore.setUserInfo({})
						uni.removeStorageSync('wxToken')
						uni.reLaunch({
							url: '/pages/login/index'
						})
					} else if (res.cancel) {

					}
				}
			})
		}
	}

	onMounted(() => {
		getUserInfo()
	})
</script>

<style scoped lang="scss">
	.personalCenter {
		padding-top: 360rpx;
		height: calc(100% - 140rpx);
		box-sizing: border-box;
		overflow: hidden;

		::v-deep .userInfo {
			height: 100%;
			padding: 20rpx 60rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;

			.icon {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 20rpx;
			}

			.info {
				.nickName {
					margin-bottom: 6rpx;
					font-size: 44rpx;
					font-weight: bold;
				}

				.dept {
					font-size: 30rpx;
					color: #888888;
				}
			}
		}

		.main {
			.cards {
				width: calc(100% - 40rpx);
				margin: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
				border-radius: 20rpx;

				.card-item {
					width: 30%;
					height: 100rpx;
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.label {
						font-size: 34rpx;
						font-weight: bold;
					}

					.value {
						font-size: 30rpx;
						color: #888888;
					}
				}
			}

			.item {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx;
				box-sizing: border-box;

				.icon {
					margin-right: 4rpx;

				}

				.label {
					font-weight: 500;
				}
			}
		}
	}
</style>